<template>
    <div class="carcontrol-container">
        <transition name="fade">
            <span class="descrease-btn" @click.stop.prevent="descreaseFood($event)" v-show="this.food.count>0"><i
                    class="icon-remove_circle_outline icon inner"></i></span>
        </transition>
        <span class="food-count" v-show="this.food.count>0">{{this.food.count}}</span>
        <span class="add-btn" @click.stop.prevent="addFood($event)"><i class="icon-add_circle icon"></i></span>
    </div>
</template>
<script type="es6">
    import Vue from 'vue'
    export default {
        props: {
            food: {
                type: Object,
                default(){
                    return {}
                }
            }
        },
        data () {
            return {}
        },
        created () {

        },
        methods: {
            descreaseFood (event) {
                if (event._constructed) {
                    if (this.food.count > 0) {
                        this.food.count--
                        if(this.food.count === 0){
                            this.$emit('des',event.target)
                        }
                    }
                }

            },
            addFood (event) {
                if (event._constructed) {
                    if (!this.food.count) {
                        Vue.set(this.food, "count", 1)
                    } else {
                        this.food.count++
                    }
                    this.$emit('add',event.target)
                }
            }

        }
    }
</script>
<style lang="less" rel="stylesheet/less">
    .carcontrol-container {
        display: flex;
        align-items: center;
        .add-btn {
            padding: 4px;
            font-size: 24px;
            color: rgb(0, 160, 220);
        }
        .food-count {
            font-size: 12px;
            color: rgb(147, 153, 159);
        }
        .descrease-btn {
            padding: 4px;
            &.fade-enter{
                opacity:0;
                transform:translate3d(26px,0,0);
                .inner{
                    transform: rotate(180deg);
                }
            }
            &.fade-leave{
                opacity:1;
                transform:translate3d(0,0,0);
            }
            &.fade-enter-active{

                transition:all 0.4s linear;
            }
            &.fade-leave-active{
                opacity:0;
                transform:translate3d(26px,0,0);
                transition:all 0.4s linear;
                .inner{
                    transform: rotate(180deg);
                }
            }
            .inner{
                display:inline-block;
                margin-top:-1px;
                height:24px;
                line-height:24px;
                font-size: 24px;
                color: rgb(0, 160, 220);
                transform:rotate(0deg);
                transition:all 0.4s linear;
            }

        }
    }
</style>